<script lang="ts" setup>
interface Props {
  name: string // 队名
  logo?: string; // 队徽
  role: 'home' | 'away' //角色
}
enum Color{
  home = '#109CEF',
  away = '#E3A000',

}
const props = withDefaults(defineProps<Props>(), {
  role: 'home',
})

</script>

<template>
  <section class="team-info" :class="{'row-reverse': props.role === 'away'}">
    <div class="logo">
      <img alt="" :src="props.logo">
    </div>

    <div class="content" :class="{'pos-reverse':props.role==='away'}">
      <div class="name" :class="{'row-reverse': props.role === 'away', }">
        <i class="radius" :style="{backgroundColor: Color[props.role]}" />
        <span> {{ props.name }}</span>
      </div>

      <div class="action">
        <div class="action-info">
          <img alt="" :src="props.logo" style="width: 16px">
          <span>1</span>
        </div>
        <div class="action-info" >
          <img alt="" :src="props.logo" style="width: 16px">
          <span>1</span>
        </div>
        <div class="action-info" >
          <img alt="" :src="props.logo" style="width: 16px">
          <span>1</span>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.row-reverse{
  flex-flow: row-reverse;
}
.pos-reverse{
  align-items: flex-end !important;
}
.team-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.radius{
  display: inline-block;
  border-radius: 6rem;
  height: 20px;
  width: 4px;
}
.logo {
  height: 50px;
  width: 50px;
  display: flex;
  place-items: center;
  transition: all .2s ease;
  cursor: pointer;
}
.content{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: rgba(255, 255, 255, .6);
}
.action{
  display: flex;
  gap: 12px;
}
.action-info{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}
img {
  max-width: 100%;
  height: auto;
}
</style>